<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用.sync实现子组件向父组件的数据传递</title>
	<script src="vue.js"></script>
</head>
<body>
<div id="app">
  <parent></parent>
</div>
<script>
var childNode = {
    template: `
    <div>
      <div>子组件数据：{{ childNum }}</div>
      <input v-model="childNum">
      <button @click=add >单击一次增加1</button>
    </div>
    `,
    data(){
      return{
        childNum: 0
      }
    },
    methods:{
      add(){
        this.childNum++;
        this.$emit('update:count',this.childNum);
      }
    }
  };
var parentNode = {
    template: `
    <div>
      <p>父组件数据：{{ num }}</p>
      <child :count.sync="num"></child>
    </div>
    `,
    components: {
      'child': childNode
    },
    data(){
      return {
        'num':0
      }
    }
  };
// 创建根实例
new Vue({
    el: '#app',
    components: {
      'parent': parentNode
    }
  })
</script>
</body>
</html>
